<template>
  <div class="wapeer">
    <transition :name="transition">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
export default{
  data () {
    return {
      transition: 'slide-left'
    }
  },
  computed: {
    routerLen () {
      return this.$store.getters.getRouterHistoryLength
    },
    usercustId () {
      return this.$store.getters.getcustId
    },
    timeNm () {
      return this.$store.getters.gettimeNm
    }
  },
  beforeRouteUpdate (to, from, next) {
    // console.log(to)
    let isBack = this.$router.isBack
    if (isBack) { // 是返回
      let lRouterLength = this.routerLen
      if (lRouterLength <= 0) {
        // 此时 调 js桥 返回原生
        console.log('返回原生')
      } else {
        this.$store.commit('routerHistory', {type: 'back', router: from})
        this.transition = 'slide-right'
        next()
      }
    } else { // 是进入页面
      this.$store.commit('routerHistory', {type: 'to', router: from})
      this.transition = 'slide-left'
      next()
    }
    this.$router.isBack = false
  },
  mounted () {
    this.$publicFun.getUserInfo(this).then(res => {
      console.log(this.$store.getters.getClientNo)
    })
  }
}
</script>
<style>
.wapeer { position: relative;height: 100%;}
.child-view { position: absolute; width:100%; height: 100%; transition: all .4s cubic-bezier(.55,0,.1,1); }
.slide-left-enter, .slide-right-leave-active { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
.slide-left-leave-active, .slide-right-enter { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
</style>
